<template>
  <div class="writeBlog-container">
    <div class="writeBlog-container-main">
      <el-card shadow="hover" class="writeBlog-container-card">
        <div class="clearfix" slot="header">
          <span style="font-size: 16px; font-weight: 600">发布文章</span>
        </div>
        <div class="blog-content">
          <!-- 所有编辑提交的内容都是Form表单 -->
          <el-form
            label-width="100px"
            ref="blogForm"
            :model="writeBlogForm"
            class="writeBlogForm"
            :rules="writeBlogFormRules"
          >
            <el-row>
              <el-col :span="23">
                <el-form-item label="文章标题" prop="title">
                  <!-- 加上字数限制5-100个字csdn -->
                  <el-input
                    placeholder="请输入文章标题"
                    show-word-limit
                    spellcheck="false"
                    maxlength="100"
                    :size="formItemSize"
                    v-model.trim="writeBlogForm.title"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="23">
                <el-form-item label="文章标签" prop="tagId">
                  <!-- 限制文章标签的个数，文章标签最多7个 -->
                  <el-select
                    multiple
                    :multiple-limit="7"
                    :size="formItemSize"
                    placeholder="请选择文章标签"
                    style="width: 100%"
                    v-model="writeBlogForm.tagId"
                  >
                    <el-option
                      v-for="item in tags"
                      :key="item.tagId"
                      :label="item.tagName"
                      :value="item.tagId"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <!-- 富文本编辑器记录文章内容 -->
            <el-row class="quill-editor-row">
              <el-col :span="22" :offset="1">
                <quill-editor
                  ref="myQuillEditor"
                  class="my-quill-editor"
                  :options="editorOption"
                  v-model="writeBlogForm.content"
                  @blur="onEditorBlur($event)"
                  @focus="onEditorFocus($event)"
                  @ready="onEditorReady($event)"
                  @change="onEditorChange($event)"
                ></quill-editor>
                <!-- 数据上传，先将图片或视频数据上传到服务器，再将图片或视频的连接插入到富文本编辑器的文本显示中 -->
                <el-upload
                  action="#"
                  v-show="false"
                  class="resource-upload"
                  :show-file-list="false"
                  :http-request="uploadHandler"
                >
                </el-upload>
              </el-col>
            </el-row>
            <!-- 显示定时器的倒计时间 -->
            <div class="timer-container" style="padding: 0px 45px 0px 0px">
              <div
                class="timer-content"
                style="
                  width: 100%;
                  height: 18px;
                  text-align: right;
                  color: #38393c;
                "
              >
                文章将在<span
                  style="
                    width: 50px;
                    height: 100%;
                    display: inline-block;
                    text-align: center;
                  "
                  >{{ countDown }}</span
                >秒后自动保存
              </div>
            </div>
            <el-row>
              <el-col
                :span="10"
                style="
                  display: flex;
                  justify-content: flex-start;
                  align-items: center;
                "
              >
                <el-form-item label="文章类型" prop="kind">
                  <el-radio-group
                    v-model="writeBlogForm.kind"
                    :size="formItemSize"
                  >
                    <el-radio label="0">原创</el-radio>
                    <el-radio label="1">转载</el-radio>
                    <el-radio label="2">翻译</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col
                :span="15"
                style="
                  display: flex;
                  justify-content: flex-start;
                  align-items: center;
                "
              >
                <el-form-item label="可见范围" prop="viewRange">
                  <el-radio-group v-model="viewRange" :size="formItemSize">
                    <el-radio label="0">全部可见</el-radio>
                    <el-radio label="1">粉丝可见</el-radio>
                    <el-radio label="2">仅我可见</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col
                :span="12"
                :offset="6"
                style="display: flex; justify-content: space-evenly"
              >
                <el-button
                  icon="el-icon-s-promotion"
                  :size="formItemSize"
                  plain
                  type="primary"
                  @click="Submit"
                  >提交审核</el-button
                >
                <el-button
                  icon="el-icon-document-checked"
                  :size="formItemSize"
                  plain
                  type="success"
                  @click="Save"
                  >存为草稿</el-button
                >
                <el-button
                  icon="el-icon-document-delete"
                  :size="formItemSize"
                  plain
                  type="info"
                  @click="Cancel"
                  >退出编辑</el-button
                >
              </el-col>
            </el-row>
          </el-form>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script lang="ts">
import {
  getAllTags,
  addKnowledge,
  getQiNiuToken,
  getKnowledgeDetail,
  deleteKnowledge,
  uploadFileToQiNiu,
} from "@/apis/apis";
import { Component, Vue, Watch, Ref } from "vue-property-decorator";
@Component({
  name: "writeBlog",
})
export default class writeBlog extends Vue {
  @Ref("blogForm") readonly blogForm!: any;
  mounted() {
    // 获取或并判断文章信息
    this.getOldBlogInfo();
    // 最后系统合并时解开,定时保存文章
    this.saveKnowledgeByTime();
    // 请求七牛云的token
    this.getUploadToken();

    // 请求定时保存的时间并启动定时器
    // 设置富文本编辑器的title，在页面上已经渲染好元素后设置title的值,不然获取不到元素
    for (let item of this.titleConfig) {
      let tip = document.querySelector(".quill-editor " + item.Choice);
      if (!tip) continue;
      tip.setAttribute("title", item.title);
    }
  }
  // 七牛云的token
  token: string = "";
  // 文章标记，新建文章没有提交和保存过为true,已经存在的文章为false
  newBlog: boolean = true;
  // 文章的文章id,无论新旧,-1表示新建的文章
  knowledgeId: number = -1;
  // 定时器
  saveTimer: any = null;
  // 倒计时的秒数
  countDown: number = 0;
  // 控制页面组件的大小
  formItemSize: string = "medium";
  viewRange: string = "0";
  // 知识的id可能事先并不存在
  writeBlogForm: {
    authorId?: number;
    content?: string;
    kind: string;
    knowledgeId?: any;
    title: string;
    tagId: number[];
    status?: number;
  } = {
    authorId: this.$store.state.userId,
    content: "",
    title: "",
    kind: "0",
    knowledgeId: null,
    tagId: [],
    status: 0,
  };
  // 基本表单信息的校验
  writeBlogFormRules = {
    title: [
      { required: true, message: "请输入文章标题", trigger: "blur" },
      { min: 2, max: 100, message: "长度在 5 到 100 个字符", trigger: "blur" },
    ],
    tagId: [{ required: true, message: "请选择文章标签", trigger: "blur" }],
    kind: [{ required: true, message: "请选择文章类型", trigger: "blur" }],
  };
  // 表单校验函数
  // 1.点击提交审核时先进行表单校验，再进行宽松模式敏感词检测，最后提交审核，提交后返回前一个页面/主页
  // 2.点击存为正确模式：部分表单项可以不进行选择，但是必须简要文章存在内容才能保存，否者提示用户输入内容，保存后跳转到前一个页面/主页
  // 简化2的操作，用户在输入基本必填信息之后就可以进行保存。
  // 3.点击退出编辑，直接返回前一个页面/主页，是否需要清空内容？浏览器查看内存消耗？
  // 富文本编辑器的内容
  uploadHandler(e: any) {
    let imgUrl: string = "";
    let formData = new FormData();
    // 键值对形式上传
    formData.append("myFileName", e.file);
    // 将数据上传到服务器并返回图片的链接,需要七牛云的接口
    uploadFileToQiNiu(this.token, formData)
      .then((res) => {
        if (res.data.code == "200") {
          // 获取图片的链接
          imgUrl = res.data.data;
          // myQuillEditor是富文本编辑器的ref,获取光标的位置
          let quill = (this.$refs as any).myQuillEditor.quill;
          let length = quill.getSelection().index;
          // 插入图片
          quill.insertEmbed(length, "image", imgUrl);
          // 光标移动到最后
          quill.setSelection(length + 1);
        } else {
          console.log("图片上传失败！");
          this.$message.error("图片上传失败！请重试！");
        }
      })
      .catch((err) => {
        console.log("this is error from writeBlog uploadHandler");
        console.log(err);
      });
  }
  // 存放所有的tags标签
  tags: Array<{ tagId: number; tagName: string }> = [
    {
      tagId: 1,
      tagName: "test",
    },
  ];
  // 获取所有的标签
  async getAllTags() {
    getAllTags()
      .then((res) => {
        let resTags = res.data.data;
        resTags.sort((a: any, b: any) => a.tagId - b.tagId);
        // 清空tags数组
        this.tags = [];
        for (let item of resTags) {
          this.tags.push({ tagId: item.tagId, tagName: item.tagName });
        }
        // console.log(this.tags);
      })
      .catch((err) => {
        console.log("this is error from writeBlog getAllTags");
        console.log(err);
      });
  }
  // 获取文章上传的token
  getUploadToken() {
    getQiNiuToken()
      .then((res) => {
        if (res.data.code === "200") {
          this.token = res.data.data;
        } else {
          this.$message.error("获取文章上传失败！请重试！");
        }
      })
      .catch((err) => {
        console.log("this is error from writeBlog getUploadToken");
        console.log(err);
      });
  }

  // 6定时保存文章
  saveKnowledgeByTime() {
    // 传递的数据是秒数，
    let count = 1800;
    this.countDown = count;
    this.saveTimer = setInterval(() => {
      this.countDown -= 1;
      if (this.countDown <= 0) {
        // 调用this.Save
        this.Save();
        this.countDown = count;
        this.$message.success("文章自动保存成功！");
      }
    }, 1000);
  }

  // 定时器清除
  clearSaveTimer() {
    // 定时器清除
    if (this.saveTimer) {
      clearInterval(this.saveTimer);
      this.saveTimer = null;
      console.log("定时器已清除");
    }
  }

  // 1.对于已经存在的文章，从个人中心中跳转到此页面时需要接受文章的详细信息
  async getOldBlogInfo() {
    // 个人中心打开传递个人中心选中文章的id
    let knowledgeId = this.$route.query.knowledgeId as string;
    // console.log(knowledgeId);

    // 等待获取所有标签之后获取文章的详细信息
    await this.getAllTags();
    // 根据id判断是从何处打开文章，为空是从首页打开，不为空是从个人中心打开
    if (knowledgeId) {
      // 根据id获取文章的详细信息
      this.newBlog = false;
      // 接收的id是字符串需要转化为数字
      this.writeBlogForm.knowledgeId = parseInt(knowledgeId);
      // 向数据库中请求对应知识的详细信息，填充到表单中
      getKnowledgeDetail(this.writeBlogForm.knowledgeId)
        .then((res) => {
          // console.log(res);
          if (res.data.code === "200") {
            // 将文章的详细信息填充到表单中
            let knowledgeDetail = res.data.data;
            this.writeBlogForm.title = knowledgeDetail.title;
            // 现在文章的标签需要和之前请求的所有的标签对比，因为管理员可以删除标签
            // 所以文章之前的标签可能已经不存在了，需要进行判断,在标签不为空的时候处理
            if (knowledgeDetail.tag !== "" && knowledgeDetail.tag.length > 0) {
              // 文章的标签在所有标签中存在才加入
              for (let item of knowledgeDetail.tag) {
                for (let tag of this.tags) {
                  if (item.tagId === tag.tagId) {
                    this.writeBlogForm.tagId.push(item.tagId);
                  }
                }
              }
            }
            this.writeBlogForm.kind = knowledgeDetail.kind;
            this.writeBlogForm.content = knowledgeDetail.content;
          } else {
            this.$message.error("获取文章详细信息失败！请重试！");
          }
        })
        .catch((err) => {
          console.log("this is error from writeBlog getOldBlogInfo");
          console.log(err);
        });
    }
  }

  // 在组件销毁前清除定时器
  beforeDestroy() {
    this.clearSaveTimer();
  }

  //5 用户没有点击退出编辑而是直接关闭页面或路由跳转，也需要删除提交的数据,自动保存的不管，主要是删除上传的内容
  destroyed() {
    // 如果是新建的文章，需要删除自动保存的数据
    if (this.newBlog) {
      // 存在知识的id表示已经自动保存过
      if (this.writeBlogForm.knowledgeId) {
        // 删除自动保存的数据
        deleteKnowledge(this.writeBlogForm.knowledgeId)
          .then((res) => {
            // console.log(res);
            if (res.data.code === "200") {
              this.$message.success("文章自动保存数据删除成功！");
            } else {
              this.$message.error("文章自动保存数据删除失败！请重试！");
            }
          })
          .catch((err) => {
            console.log("this is error from writeBlog destroyed");
            console.log(err);
          });
      }
    }
  }

  // 富文本编辑器的事件
  // 失去焦点
  onEditorBlur(quill: any) {
    // console.log("editor blur!", quill);
  }
  // 获得焦点
  onEditorFocus(quill: any) {
    // console.log("editor focus!", quill);
  }
  // 富文本编辑器准备就绪
  onEditorReady(quill: any) {
    // console.log("editor ready!", quill);
  }
  // 富文本编辑器内容改变
  onEditorChange({ quill, html, text }: any) {
    // console.log("editor change!", quill, html, text);
    this.writeBlogForm.content = html;
  }
  // 2.提交审核
  Submit() {
    // 保存并发布给管理查看文章
    this.blogForm.validate((valid: any) => {
      if (valid) {
        // 表单校验成功，且内容存在
        if (this.writeBlogForm.content) {
          // 作者信息需要修改为当前登录用户的信息
          let addKnowledgeData = {
            authorId: parseInt(this.$store.state.userId),
            content: this.writeBlogForm.content,
            kind: this.writeBlogForm.kind,
            knowledgeId: this.writeBlogForm.knowledgeId,
            status: 1,
            tagId: this.writeBlogForm.tagId,
            title: this.writeBlogForm.title,
          };
          addKnowledge(addKnowledgeData)
            .then((res) => {
              if (res.data.code === "200") {
                this.$message.success("文章提交成功！等待管理员审核！");
                // 修改文章保存状态
                this.newBlog = false;
                // 跳转到主页
                this.$router.push({ path: "/userMain" });
              } else {
                this.$message.error("文章提交失败！请重试！");
              }
            })
            .catch((err) => {
              console.log("this is error from writeBlog Submit");
              console.log(err);
            });
        } else {
          this.$message.error("请先输入文章内容后再提交！");
        }
      } else {
        // 表单校验失败
        this.$message.error("请先输入完整的表单内容后再提交审核！");
      }
    });
  }
  // 3存为草稿
  Save() {
    // 发送请求将文章保存在数据库中
    // 实现定时保存文章，当用户向富文本编辑器中输入内容后开始启动定时器进行保存，setTimeOut回调函数
    // 每隔一段时间调用一次save
    // 保存需要进行校验，定时保存可以让用户不用填写完整的表单信息
    this.blogForm.validate((valid: any) => {
      if (valid) {
        if (this.writeBlogForm.content) {
          let addKnowledgeData = {
            authorId: parseInt(this.$store.state.userId),
            content: this.writeBlogForm.content,
            title: this.writeBlogForm.title,
            kind: this.writeBlogForm.kind,
            knowledgeId: this.writeBlogForm.knowledgeId,
            tagId: this.writeBlogForm.tagId,
            status: 0,
          };
          addKnowledge(addKnowledgeData)
            .then((res) => {
              // console.log(res);
              if (res.data.code === "200") {
                this.$message.success("文章保存成功！");
                this.writeBlogForm.knowledgeId = res.data.data;
                // 变为旧文章
                this.newBlog = false;
              } else {
                this.$message.error("文章保存失败！请重试！");
              }
            })
            .catch((err) => {
              console.log("this is error from writeBlog Save");
              console.log(err);
            });
        } else {
          this.$message.error("请先输入文章内容后再保存！");
        }
      } else {
        // 表单校验失败
        this.$message.error("请先输入完整的表单内容后再保存！");
      }
    });
  }
  // 4退出编辑
  Cancel() {
    // 退出编辑,如果之前有自动保存的内容需要进行删除
    this.$confirm("是否退出编辑？退出后未保存的文章将被删除", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(() => {
        // 确定退出编辑，跳转到个人中心
        this.$router.push({ path: "/personalCenter" });
      })
      .catch(() => {
        // 取消退出编辑
        this.$message.info("取消退出编辑.");
      });
  }
  // 富文本编辑器的配置
  editorOption = {
    placeholder: "请输入文章内容",
    contentType: "html",
    theme: "snow", // 主题
    modules: {
      toolbar: {
        container: [
          ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
          ["blockquote", "code-block"], // 引用  代码块
          [{ header: 1 }, { header: 2 }], // 1 2 级标题
          [{ list: "ordered" }, { list: "bullet" }], // 有序和无序列表
          [{ script: "sub" }, { script: "super" }], // 下标和上标
          [{ indent: "-1" }, { indent: "+1" }], // 缩进
          [{ direction: "rtl" }], // 文本方向
          [
            {
              size: [
                "12",
                "14",
                "16",
                "18",
                "20",
                "22",
                "24",
                "28",
                "32",
                "36",
              ],
            },
          ], // 字体大小
          [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
          [{ color: [] }, { background: [] }], // 字体颜色和字体背景颜色
          [{ font: [false, "serif", "monospace"] }], //字体种类
          [{ align: [] }], // 对齐方式
          ["clean"], // 清除文本格式
          ["link", "image", "video"], // 链接、图片、视频
        ],
        handlers: {
          // 配置图片上传操作
          image: function (value: any) {
            if (value) {
              // 选中el-upload组件(不为空），触发点击事件
              const element = document.querySelector(
                ".resource-upload input"
              ) as HTMLInputElement | null;
              element?.click();
            } else {
              (this as any).quill.format("image", false);
            }
          },
          // 设置视频的上传效果
        },
      },
      // 在modules中配置ImageResize模块
      imageDrop: true, // 支持拖放图片上传
      imageResize: {
        displayStyles: {
          backgroundColor: "black",
          border: "none",
          color: "white",
        },
        modules: ["Resize", "DisplaySize", "Toolbar"],
      },
    },
  };
  // 富文本编辑器工具栏鼠标悬浮提示
  titleConfig: Array<{ Choice: string; title: string }> = [
    { Choice: ".ql-insertMetric", title: "跳转配置" },
    { Choice: ".ql-bold", title: "加粗" },
    { Choice: ".ql-italic", title: "斜体" },
    { Choice: ".ql-underline", title: "下划线" },
    { Choice: ".ql-header", title: "段落格式" },
    { Choice: ".ql-strike", title: "删除线" },
    { Choice: ".ql-blockquote", title: "块引用" },
    { Choice: ".ql-code", title: "插入代码" },
    { Choice: ".ql-code-block", title: "插入代码段" },
    { Choice: ".ql-font", title: "字体" },
    { Choice: ".ql-size", title: "字体大小" },
    { Choice: '.ql-list[value="ordered"]', title: "编号列表" },
    { Choice: '.ql-list[value="bullet"]', title: "项目列表" },
    { Choice: ".ql-direction", title: "文本方向" },
    { Choice: '.ql-header[value="1"]', title: "h1" },
    { Choice: '.ql-header[value="2"]', title: "h2" },
    { Choice: ".ql-align", title: "对齐方式" },
    { Choice: ".ql-color", title: "字体颜色" },
    { Choice: ".ql-background", title: "背景颜色" },
    { Choice: ".ql-image", title: "图像" },
    { Choice: ".ql-video", title: "视频" },
    { Choice: ".ql-link", title: "添加链接" },
    { Choice: ".ql-formula", title: "插入公式" },
    { Choice: ".ql-clean", title: "清除字体格式" },
    { Choice: '.ql-script[value="sub"]', title: "下标" },
    { Choice: '.ql-script[value="super"]', title: "上标" },
    { Choice: '.ql-indent[value="-1"]', title: "向左缩进" },
    { Choice: '.ql-indent[value="+1"]', title: "向右缩进" },
    { Choice: ".ql-header .ql-picker-label", title: "标题大小" },
    { Choice: '.ql-header .ql-picker-item[data-value="1"]', title: "标题一" },
    { Choice: '.ql-header .ql-picker-item[data-value="2"]', title: "标题二" },
    { Choice: '.ql-header .ql-picker-item[data-value="3"]', title: "标题三" },
    { Choice: '.ql-header .ql-picker-item[data-value="4"]', title: "标题四" },
    { Choice: '.ql-header .ql-picker-item[data-value="5"]', title: "标题五" },
    { Choice: '.ql-header .ql-picker-item[data-value="6"]', title: "标题六" },
    { Choice: ".ql-header .ql-picker-item:last-child", title: "标准" },
    { Choice: '.ql-size .ql-picker-item[data-value="small"]', title: "小号" },
    { Choice: '.ql-size .ql-picker-item[data-value="large"]', title: "大号" },
    { Choice: '.ql-size .ql-picker-item[data-value="huge"]', title: "超大号" },
    { Choice: ".ql-size .ql-picker-item:nth-child(2)", title: "标准" },
    { Choice: ".ql-align .ql-picker-item:first-child", title: "居左对齐" },
    {
      Choice: '.ql-align .ql-picker-item[data-value="center"]',
      title: "居中对齐",
    },
    {
      Choice: '.ql-align .ql-picker-item[data-value="right"]',
      title: "居右对齐",
    },
    {
      Choice: '.ql-align .ql-picker-item[data-value="justify"]',
      title: "两端对齐",
    },
  ];
}
</script>

<style lang="scss">
// 注意在配置富文本编辑器的样式时，是在组件内写的样式所以需要删除scoped，
// 使样式全局生效
@import "@/assets/styles/themes.scss";
.writeBlog-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: fit-content;
  padding: 0px 10px 20px 10px;
  margin: 0 auto;
  .writeBlog-container-main {
    width: 1200px;
    height: auto;
    .writeBlog-container-card {
      @include useTheme {
        background-color: getVar("divColor");
        color: getVar("textColor");
      }
      .blog-content {
        .writeBlogForm {
          // 设置富文本编辑器的样式
          .quill-editor-row {
            margin-bottom: 10px;
            // 设置文本编辑器的大小,和滚动条
            .my-quill-editor .ql-container {
              min-height: 400px;
              max-height: 600px;
              overflow: auto;
            }
          }
        }
      }
    }
  }
}
.editor {
  line-height: normal !important;
  height: 400px;
}
.ql-snow .ql-tooltip[data-mode="link"]::before {
  content: "请输入链接地址:";
}
.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
  border-right: 0px;
  content: "保存";
  padding-right: 0px;
}

.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
  content: "14px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before {
  content: "10px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before {
  content: "18px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before {
  content: "32px";
}

.ql-snow .ql-picker.ql-header .ql-picker-label::before,
.ql-snow .ql-picker.ql-header .ql-picker-item::before {
  content: "文本";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
  content: "标题1";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
  content: "标题2";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
  content: "标题3";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
  content: "标题4";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
  content: "标题5";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
  content: "标题6";
}

.ql-snow .ql-picker.ql-font .ql-picker-label::before,
.ql-snow .ql-picker.ql-font .ql-picker-item::before {
  content: "标准字体";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before {
  content: "衬线字体";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {
  content: "等宽字体";
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="12"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="12"]::before {
  content: "12px";
  vertical-align: top;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="14"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="14"]::before {
  content: "14px";
  vertical-align: top;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="16"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16"]::before {
  content: "16px";
  vertical-align: top;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="18"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="18"]::before {
  content: "18px";
  vertical-align: top;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="20"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="20"]::before {
  content: "20px";
  vertical-align: top;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="22"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="22"]::before {
  content: "22px";
  vertical-align: top;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="24"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="24"]::before {
  content: "24px";
  vertical-align: top;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="28"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="28"]::before {
  content: "28px";
  vertical-align: top;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="32"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="32"]::before {
  content: "32px";
  vertical-align: top;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="36"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="36"]::before {
  content: "36px";
  vertical-align: top;
}

/* 这个是字号数字对应的px值 */
.ql-editor .ql-size-12 {
  font-size: 12px;
}
.ql-editor .ql-size-14 {
  font-size: 14px;
}
.ql-editor .ql-size-16 {
  font-size: 16px;
}
.ql-editor .ql-size-18 {
  font-size: 18px;
}
.ql-editor .ql-size-20 {
  font-size: 20px;
}
.ql-editor .ql-size-22 {
  font-size: 22px;
}
.ql-editor .ql-size-24 {
  font-size: 24px;
}
.ql-editor .ql-size-28 {
  font-size: 28px;
}
.ql-editor .ql-size-32 {
  font-size: 32px;
}
.ql-editor .ql-size-36 {
  font-size: 36px;
}

/* 选择字号富文本字的大小 */
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="12"]::before {
  font-size: 12px;
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="14"]::before {
  font-size: 14px;
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16"]::before {
  font-size: 16px;
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="18"]::before {
  font-size: 18px;
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="20"]::before {
  font-size: 20px;
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="22"]::before {
  font-size: 22px;
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="24"]::before {
  font-size: 24px;
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="28"]::before {
  font-size: 28px;
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="32"]::before {
  font-size: 32px;
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="36"]::before {
  font-size: 36px;
}
</style>